<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="tableTop">
      <el-alert title="添加商品信息" type="info" show-icon class="T1" :closable="false" center></el-alert>
      <el-steps
        :active="parseInt(activeIndex)"
        finish-status="success"
        class="tableTop"
        align-center
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form
        :model="goodsInfo"
        :rules="rulesFrom"
        ref="goodsInfo"
        class="tableTop"
        status-icon
        label-width="100px"
        label-position="top"
      >
        <el-tabs
          tab-position="left"
          class="tableTop"
          v-model="activeIndex"
          :before-leave="beforeTebsLeave"
          @tab-click="tabClicked"
        >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称：" prop="name">
              <el-input v-model="goodsInfo.name"></el-input>
            </el-form-item>

            <el-form-item label="商品价格(元)：" prop="money">
              <el-input v-model="goodsInfo.money" type="number"></el-input>
            </el-form-item>

            <el-form-item label="商品重量(g)：" prop="kg">
              <el-input v-model="goodsInfo.kg" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量(件)：" prop="pice">
              <el-input v-model="goodsInfo.pice" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类：" prop="value">
              <span>请选择商品分类：</span>
              <el-cascader
                class="T1 cascader"
                v-model="goodsInfo.value"
                :options="options"
                :props="{ expandTrigger: 'hover ' }"
                placeholder="请选择"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <el-form-item v-for="item in paramsData" :key="item.id" :label="item.name">
              <el-checkbox-group v-model="item.val">
                <el-checkbox :label="item1" v-for="(item1,index) in item.val" :key="index" border></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <el-form-item :label="item.name" v-for="(item,index) in listData" :key="index ">
              <el-input v-model="item.val"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3">
            <el-upload
              :action="uploadUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
              :headers="headersObject"
              drags
              :on-success="handleSuccse"
              :on-error="handleError"
            >
              <el-button size="small" type="primary" class="tableTop">点击上传</el-button>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <!-- 富文本编辑器 -->
            <quill-editor v-model="goodsInfo.contentText" :options="editorOption" class="H3"></quill-editor>
            <el-button type="primary" class="addBtn" @click="pushGoods">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <el-dialog title="预览" :visible.sync="showDialog">
      <img :src="showImgUrl" alt="预览" width="100%" />
    </el-dialog>
  </div>
</template>
<script>
import _ from "lodash";

export default {
  name: "add",
  created() {
    this.getListData();
  },
  data() {
    return {
      /* 文本 */

      /* 三级联动 */
      editorOption: {
        // some quill options
      },
      options: [],
      /* 当前tab页的index */
      activeIndex: "0",
      goodsInfo: {
        name: "",
        money: 0,
        kg: 0,
        pice: 0,
        value: [],
        pics: [],
        contentText: "",
        attrs:[]
      },
      /* 教验规则 */
      rulesFrom: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        money: [
          { required: true, message: "请输入正确的价格", trigger: "blur" }
        ],
        kg: [{ required: true, message: "请输入正确的重量", trigger: "blur" }],
        pice: [
          { required: true, message: "请输入正确的数量", trigger: "blur" }
        ],
        value: { required: true, message: "请选择你的分类", trigger: "blur" }
      },
      /* 商品参数 */
      paramsData: [],
      /* 商品属性 */
      listData: [],
      /* header请求头对象 */
      headersObject: {
        Authorization: window.sessionStorage.getItem("token")
      },
      /* action发送post请求路径 */
      uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
      /* 文件列表 */
      fileList: [],
      /* 图片预览弹窗 */
      showDialog: false,
      showImgUrl: ""
    };
  },
  methods: {
    /* 获取数据 */
    getListData() {
      this.options = [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ];
    },
    /* tab切换限制 */
    beforeTebsLeave(activeName, oldName) {
      var nowFlag = false;
      this.$refs.goodsInfo.validate(flag => {
        nowFlag = flag;
      });
      if (nowFlag) {
        if (oldName === "0" && this.goodsInfo.value.length != 3) {
          this.Message({ message: "请选择三级商品分类", type: "error" });
          return false;
        }
        return true;
      }
      this.Message({ message: "请完成必填内容", type: "error" });
      return false;
    },
    tabClicked() {
      if (this.activeIndex === "1") {
        this.paramsData = [
          {
            id: 1231,
            name: "版式",
            val: "曲面大屏 36D 立体环绕 高清1080P".split(" ")
          },
          {
            id: 1232,
            name: "颜色",
            val: "玫瑰红 便便黄 姨妈红 宝石绿 冰川蓝 曜石黑".split(" ")
          },
          {
            id: 1233,
            name: "特性",
            val: "高清处理器 高速接口 性能强悍".split(" ")
          }
        ];
      } else if (this.activeIndex === "2") {
        this.listData = [
          { name: "主体-商品名称", val: "小飞机" },
          { name: "分辨率", val: "1080P" },
          { name: "尺寸", val: "62英寸" },
          { name: "曲面屏", val: "是" },
          { name: "支持最大网速", val: "1000m" },
          { name: "vr高清投影", val: "支持" }
        ];
      }
    },
    /* 按钮触发图片预览 */
    handlePreview(file) {
      this.showDialog = true;
      this.showImgUrl = file.url;
    },
    /* 按钮触发删除图片 */
    handleRemove() {
      console.log("删除图片预览");
    },
    /* 上传成功的回调钩子 */
    handleSuccse(res, file) {
      let picInfo = { id: file.uid, name: file.name, url: file.url };
      this.goodsInfo.pics.push(picInfo);
      this.Message({ message: "上传成功", type: "success" });
    },
    /* 错误提示 */
    handleError(res) {
      this.Message({
        message: "服务器奔溃,上传失败",
        type: "error"
      });
    },
    /* 删除图片 */
    handleRemove(file) {
      console.log(file);
      const fileId = file.uid;
      const index = this.goodsInfo.pics.findIndex(x => {
        x.id === fileId;
      });
      this.goodsInfo.pics.splice(index, 1);
      this.Message({ message: "删除成功", type: "success" });
    },
    onEditorChange(event) {
      console.log(event);
    },
    pushGoods() {
      let from = _.cloneDeep(this.goodsInfo);
      from.value = from.value.join(",");
    
      /* 处理动态参数 */
     
      this.paramsData.forEach((item)=>{
        let newInfo={attr_id:item.id,attr_val:item.val.join(' ')};
       this.goodsInfo.attrs.push(newInfo);
      })
      from.attrs=this.goodsInfo.attrs;
       console.log(from);
      this.Message({ message: "添加商品成功", type: "success" });
      this.$router.push('/2-0');
    }
  }
};
</script>
<style scoped>
.H3 {
  height: 350px;
}
.addBtn {
  margin-top: 100px;
}
</style>